<template>
    <view class="content" :class="['content-page-' + game.theme]" @tap="palyClickAudio"
	:style="game.bg?'--content-bg:url('+game.bg+');':''">
        <view class="card-position" :class="{'init-active':initActive}">
            <view class="card-item flex flex-center" :class="{'selected-card':selectedCard===item,'block-none':selectedCard&&selectedCard!==item}" 
            v-for="item in 4" :key="item"
            @tap="selectcard(item)">
            <view class="thumb" v-if="!selectedCard">
                <uni-icons type="heart-filled" size="var(--item-font-size)" color="var(--item-bg-1)" />
            </view>
            <view class="item-content h-100 flex flex-column flex-center" v-else-if="task.content">
                <view class="h8 font-weight-600 text-center py-3">{{task.content}}</view>
                <view class="flex-1 flex flex-center">
                    <image :src="task.icon" class="item-image" mode="aspectFit"/>
                </view>
                <view class="item-difficulty flex flex-y-center p-3">
                    <view>难度：</view>
                    <uni-icons :type="task.difficulty >= difficulty ? 'heart-filled' : 'heart'" size="20" color="var(--xl-primary)" v-for="difficulty in 5"/>
                </view>
            </view>
            <view class="item-empty flex flex-column flex-center" v-else>
                <uni-icons type="heart" size="var(--item-font-size)" color="var(--item-bg-1)" />
                <view class="h8">空空如也，再接再励</view>
            </view>
        </view>
        </view>
        <toggle-sound />
        <view class="btn-position flex grid-gap-4 flex-center">
            <view class="bg-danger text-white rounded-4 px-6 py-2 font-weight-600 text-center h8"
                hover-class="bg-danger-dark-1" @click="close(true)">结束游戏</view>
        </view>
        <view class="rule-position" v-if="game.rule_content">
			<text class="h9 py-1">{{game.rule_content}}</text>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { $http, $page, useGameCustom, createAudio } from '@/utils';
const game = ref<any>({
    theme: '',
    bg: '',
    rule_content:"点击卡片抽取今日新姿势"
});
const originList = ref<any[]>([]);
const list=ref<any[]>([]);
const search = ref({
    vip_id: 0,
    game: 'STICK_CARD'
});
const task=ref({
    content:''
})
const initActive = ref(false);
const selectedCard = ref(0);
const clickAudioContext = createAudio('click');
onLoad((options: any) => {
    $page.title();
    if (options.id === 'custom') {
        const gameCustom = useGameCustom(search.value.game);
        gameCustom.get().then((data: any) => {
            list.value = data;
        }).catch((err: any) => {
            uni.showModal({
                title: '提示',
                content: err.msg,
                showCancel: false,
                confirmText: '返回',
                success: (res: any) => {
                    close();
                }
            })
        })
    } else {
        search.value.vip_id = options.id;
        getQuestionList();
    }
})
onUnload(() => {
    clickAudioContext.destroy();
})
const getQuestionList = () => {
    $http.get('Question/list', {
        data: search.value
    })
        .then((res: any) => {
            if (res.code === $http.ResponseCode.SUCCESS) {
                game.value.theme=res.data.game.theme
                game.value.bg=res.data.game.bg
                if (res.data.game.rule_content) {
                    game.value.rule_content = res.data.game.rule_content;
                }
                originList.value = res.data.list;
                initListData(res.data.list);
                initActive.value = true;
            } else {
                uni.showModal({
                    title: '提示',
                    content: res.msg,
                    showCancel: false,
                    confirmText: '返回',
                    success: (res: any) => {
                        close();
                    }
                })
            }
        }).catch((err: any) => {
        })
}
const initListData=(data:any)=>{
    const boomCount = data.length;
    let listLen = Math.ceil(Math.random() * 15 + 5) * 6;
    const listData = new Array(listLen).fill(0);
    for (let i = 0; i < boomCount; i++) {
        listData[i] = data[i];
    }
    // 随机打乱排序
    shuffleArray(listData);
    list.value = listData;
}
const shuffleArray=(array:any[])=> {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}
let clearTimeEr:number;
// 生成一个5-15的随机数
let maxSelectedNum=Math.floor(Math.random() * 10 + 5);
let selectedNum=0;
const selectcard= (item:number) => {
    if (selectedCard.value === item) {
        initActive.value = false;
        task.value={content:''};
        setTimeout(() => {
            initActive.value = true;
        },500)
        if(clearTimeEr){
            clearTimeout(clearTimeEr);
        }
        clearTimeEr=0;
        return selectedCard.value = 0;
    }
    selectedNum++;
    // 选中的卡片
    selectedCard.value = item;
    if(selectedNum<maxSelectedNum){
        const MaxRoundNum=list.value.length;
        // 获取一个随机数，0~MaxRoundNum
        const randomNum = Math.floor(Math.random() * MaxRoundNum);
        task.value=list.value[randomNum];
        if(task.value.content){
            selectedNum=0;
        }else{
            clearTimeEr=setTimeout(() => {
                selectcard(item);
            },3000)
        }
    }else{
        const MaxRoundNum=originList.value.length;
        // 获取一个随机数，0~MaxRoundNum
        const randomNum = Math.floor(Math.random() * MaxRoundNum);
        task.value=originList.value[randomNum];
        selectedNum=0;
        maxSelectedNum=Math.floor(Math.random() * 10 + 5);
    }
}
const close = (confirm?: boolean) => {
    if (confirm) {
        uni.showModal({
            title: '提示',
            content: '确定要结束游戏吗？',
            success: (res: any) => {
                if (res.confirm) {
                    close();
                }
            }
        })
        return;
    }
    $page.switch('/pages/index/index');
}
const palyClickAudio = () => {
    clickAudioContext.restPlay();
}
</script>

<style lang="scss" scoped>
.content {
    --content-bg: linear-gradient(180deg, #fdcbf1, #e6dee9);
    --item-bg-1: #df89b5;
    --item-bg-2: #bfd9fe;
    --rule-color: #df89b5;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: var(--content-bg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    backdrop-filter: blur(10px);
    position: relative;

    &-page-black {
        --content-bg: linear-gradient(180deg, #0c1014, #121c29);
        --item-bg-1: #27282d;
        --item-bg-2: #2e3035;
        --rule-color: var(--xl-white);
    }

    &-page-purple {
        --content-bg: linear-gradient(180deg, #4a4c92, #363455);
        --item-bg-1: #817fa4;
        --item-bg-2: #918fb3;
        --rule-color: var(--xl-white);
    }

    &-page-cyan {
        --content-bg: linear-gradient(180deg, #022227, #325b5d);
        --item-bg-1: #7a9ba0;
        --item-bg-2: #7d9ea3;
        --rule-color: var(--xl-white);
    }

    &-page-silvery {
        --content-bg: linear-gradient(180deg, #acb6bf, #506382);
        --item-bg-1: #c4cbd5;
        --item-bg-2: #a2a8b2;
        --rule-color: var(--xl-white);
    }
}
.rule-position {
    width: 70%;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--item-bg-1), var(--item-bg-2));
    padding: 20px;
    color: var(--rule-color);
}

.btn-position {
    width: 70%;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -50%);
}
.card-position{
    --margin-size:10px;
    --item-font-size:20vw;
    position: absolute;
    left: 50%;
    top:40%;
    .card-item{
        position: absolute;
        transform: translate(-50%, 50%);
        width: 40vw;
        height: 30vh;
        bottom: 0;
        background-color: var(--content-bg);
        transition: all 0.5s;
        border-radius: 5px;
        box-shadow: 10px 10px 20px var(--item-bg-2),
             -10px -10px 20px var(--item-bg-1);
             z-index: 1;
        color:var(--rule-color);
    }
    .card-item:nth-child(1){
        transform: translate(-50%, 40%);
    }
    .card-item:nth-child(2){
        transform: translate(-50%, 50%);
    }
    .card-item:nth-child(3){
        transform: translate(-50%, 60%);
    }
    .card-item:nth-child(4){
        transform: translate(-50%, 70%);
    }
    .thumb{
        animation: heartbeat 1s infinite;;
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}
.init-active{
    .card-item:nth-child(1){
        transform: translate(calc(-100% - var(--margin-size)), calc(0% - var(--margin-size)));
    }
    .card-item:nth-child(2){
        transform: translate(var(--margin-size), calc(0% - var(--margin-size)));
    }
    .card-item:nth-child(3){
        transform: translate(calc(-100% - var(--margin-size)), calc(100% + var(--margin-size)));
    }
    .card-item:nth-child(4){
        transform: translate(calc(0% + var(--margin-size)), calc(100% + var(--margin-size)));
    }
    .card-item.selected-card{
        transform: translate(-50%, 50%);
        width: 60vw;
        height: 45vh;
        z-index: 10;
        .item-image{
            width: 40vw;
            height: 40vw;
        }
        .item-difficulty{
            color:var(--xl-primary);
        }
    }
}
.block-none{
    display: none;
}
</style>
